<template>
    <header class="app_header">
        <span class="left" @click="$router.back()">
            <i class="iconfont icon-left"></i>
            <span>返回</span>
        </span>
        <span class="title">{{title}}</span>
    </header>
</template>

<script>
export default {
    name: 'AppHeader',
    props: {
        title: {
            type: String,
            required: true
        }
    }
}
</script>

<style lang="scss" scoped>
.app_header {
    position: relative;
    text-align: center;
    height: 50px;
    padding: 0 10px;
    background: -webkit-linear-gradient(top,rgba(0,0,0,.6),rgba(0,0,0,0));
    font-size: 14px;
    line-height: 50px;
    color: #fff;
    box-shadow: 0 0 1px 1px rgba($color: #000000, $alpha: .1);
    .left {
        position: absolute;
        left: 10px;
        display: inline-flex;
        align-items: center;
    }
    .title {
        display: inline-block;
        width: calc(100% - 56px * 2);
        overflow: hidden;
    }
}
</style>
